<template v-for="item in keshi">
  <div>
    <van-sticky :offset-top="0">
      <van-nav-bar title="医院科室" left-arrow @click-left="onClickLeft"/>
    </van-sticky>


    <van-tree-select v-model:main-active-index="activeIndex" height="620" :items="items">
      <template #content >
        <div v-for="item in doctor">
          <ul class="list-1" @click="$router.push(`/home/yishengxiangqing/${item.doctor_id}`)" :v-if="activeIndex">
            <li>
              <van-image style="width: 100px;height: 100px;" :src="item.doctor_avatar"/>
              <!-- <img :src="item.doctor_avatar" alt=""> -->
            </li>
            <li>
              <ul>
                <li>{{ item.doctor_name }}</li>
                <li>{{ item.doctor_titles }}</li>
              </ul>
            </li>
          </ul>
        </div>
      </template> 
  </van-tree-select> 





  </div>
</template>

<script setup lang="ts">
import httpApi from '@/http';
import myaxios from '@/http/MyAxios';
import axios from 'axios';
import { onMounted, reactive, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import Doctor from '@/type/Doctor';
import { map } from 'lodash';

const route = useRoute()

const activeIndex:any = ref(0);
console.log(activeIndex._value)
const items = reactive([{ text: '皮肤科' },
{  text: '妇科' },
{ text: '儿科' },
{  text: '消化内科' },
{ text: '发热门诊' },
{ text: '精神心理科' },
])
// const doctor = reactive<Doctor[]>([])
const doctor = reactive<Doctor[]>([])
// 页面挂载完毕后自动加载首页
onMounted(()=>{
  let params = {department_id:1}
  httpApi.HospitalApi.queryDepartmentDoctor(params).then(res=>{
    // console.log(res)
    doctor.push(...res.data.data)
    // doctor.push(res.data.data)
    // console.log(doctor);

  })
})
const onDoctor = function(){}

watch(activeIndex,(newval,oldval)=>{
  console.log(activeIndex._value,'000000')
  window.scrollTo(0,0)
  // console.log(newval,oldval)
  // console.log(activeIndex);
  let department_id = activeIndex._value+1
  console.log(department_id,'55555')
  let params = {department_id}
  httpApi.HospitalApi.queryDepartmentDoctor(params).then(res=>{
    console.log(res)
    doctor.splice(0,doctor.length,res.data.data)

  })



  // if(activeIndex._value==1){
  //   let department_id = activeIndex._value
  //   let params = {department_id}
  //   httpApi.HospitalApi.queryDepartmentDoctor(params).then(res=>{
  //     console.log(res)
  //     // doctor.splice(0,doctor.length,res.data.data)
  //     console.log(doctor,'1')

  //   })
  // }else if(activeIndex._value==2){
  //   let department_id = activeIndex._value
  //   let params = {department_id}
  //   httpApi.HospitalApi.queryDepartmentDoctor(params).then(res=>{
  //     console.log(res)
  //     // doctor.splice(0,doctor.length,res.data.data)
  //     console.log(doctor,'2')
  //   })
  // }else if(activeIndex._value==3){
  //   let department_id = activeIndex._value
  //   let params = {department_id}
  //   httpApi.HospitalApi.queryDepartmentDoctor(params).then(res=>{
  //     console.log(res)
  //     // doctor.splice(0,doctor.length,res.data.data)
  //     console.log(doctor,'3')
  //   })
  // }else if(activeIndex._value==4){
  //   let department_id = activeIndex._value
  //   let params = {department_id}
  //   httpApi.HospitalApi.queryDepartmentDoctor(params).then(res=>{
  //     console.log(res)
  //     // doctor.splice(0,doctor.length,res.data.data)
  //     console.log(doctor,'4')
  //   })
  // }else if(activeIndex._value==5){
  //   let department_id = activeIndex._value
  //   let params = {department_id}
  //   httpApi.HospitalApi.queryDepartmentDoctor(params).then(res=>{
  //     console.log(res)
  //     // doctor.splice(0,doctor.length,res.data.data)
  //     console.log(doctor,'5')
  //   })
  // }








})





// 返回上级
const onClickLeft = () => history.back();

</script>

<style scoped>
.van-nav-bar {
  --van-nav-bar-icon-color: #fff;
  --van-nav-bar-title-text-color: #fff;
  --van-nav-bar-background: #4f87da;
  --van-nav-bar-arrow-size: 22px;
  --van-nav-bar-title-font-size: 22px;
}

.obj {
  display: flex;
  justify-content: space-between;
}

.obj>--van-image {
  margin: auto;
  width: 100px;
  height: 100px
}

.list-1 {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed rgb(214, 214, 113);
}
.list-1>ul{
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
 
}
.list-1>li>ul>li{
   font-size: 18px;
  font-weight: 600;
}
.list-1>li>ul>li:last-child{
  margin-top: 55px;
  
}
</style>